<template>
  <div class="container">
    <el-row class="slideshow-container">
      <el-col :span="24">
        <div class="slideshow-wrapper content-wraper">
          <slide-show></slide-show>
        </div>
      </el-col>
    </el-row>
    <el-row class="main-container content-wraper">
      <el-col :span="16">
        <el-card
          class="gameList"
          shadow="hover"
        >
          <el-image
            style="height: 280px"
            :src="url"
            :preview-src-list="srcList"
          >
            :fit="fit"
            ></el-image>
        </el-card>
        <el-card class="gameList">列表2</el-card>
        <el-card class="gameList">列表3</el-card>
        <el-card class="gameList">列表4</el-card>
        <el-card class="gameList">列表5</el-card>
      </el-col>
      <!-- 卡片放置区域 -->
      <el-col
        :span="7"
        class="card-container"

      >
        <el-card class="card-item">
          <h1>关于作者</h1>
        </el-card>
        <el-card class="card-item">
          通告
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Menu from "./components/Menu.vue";
import SlideShow from "./components/SlideShow.vue";
export default {
  components: {
    Menu,
    SlideShow,
  },
  props: {},
  data() {
    return {
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      srcList: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
      ],
    };
  },
  watch: {},
  computed: {},
  methods: {},
  created() {},
  mounted() {},
};
</script>
<style  scoped>
.slideshow-container {
  margin-top: 60px;
}
.main-container {
  position: relative;
  margin-top: 20px;
}
.card-container {
  position: absolute;
  top: 0;
  right: 0;
}
.card-item {
  margin-bottom: 10px;
}
.gameList {
  margin-bottom: 10px;
  padding: 0 !important;
  height: 280px;
  overflow: hidden;
}

</style>
